<script setup name="TreeSelect">
import {getCurrentInstance, reactive} from "vue";

const {proxy} = getCurrentInstance();

const props = defineProps({
  // 用于1、2、3样式，在表格中调用该控件，可能需要回传选中的值，在回调ok的函数中会回传。
  // 表格中的index号，用于回传给调用者
  indexRow: {
    type: Number,
    default: null,
  },
  // 输入的id，用于 3、4样式的数据展示
  // 每个对象的主键类型可能不一样，大部分的都是Number类型的。
  dataKey: {
    type: Number,
    default: null,
  },
  // 因为有可能在表格中供用户选择，如果每行数据都刷新一次，数据库消耗太大了。
  // 在页面外面获取一次，每个行的每个对象都能使用了，直接赋值给下拉列表
  treeList: {
    type: Array,
    default: null,
  },
  //  关键字名称
  id: {
    type: String,
    default: "id"
  },
  // 树节点列名
  name: {
    type: String,
    default: "name"
  },
  // 树节点列名
  children: {
    type: String,
    default: "children"
  }
});

let pd = reactive({
  treeList: [],
  dataKey: 0,
  reParams: [],
  queryParams: {
    id: null,
    parentId: null
  }
});

defineExpose({
  initTreeSelect
});
const emit = defineEmits(["ok"]);

/** 选择框返回*/
function handleSelectChange(item) {
  pd.reParams.id = item;
  pd.reParams.indexRow = props.indexRow;
  emit("ok", pd.reParams);
}

watch(() => props.treeList, val => {
  initTreeSelect();
}, {deep: true, immediate: true});

watch(() => props.dataKey, val => {
  pd.queryParams.id = props.dataKey;
}, {deep: true, immediate: true});

// 初始化3、4样式的展示
function initTreeSelect() {

  if (pd.treeList.length > 0) {
    return;
  }
  if (props.treeList) {
    pd.treeList = props.treeList;
  }
}

</script>

<template>
  <el-tree-select v-model="pd.queryParams.id" :data="pd.treeList" @change="handleSelectChange"
                  filterable :props="{ value: props.id, label: props.name, children: props.children }"
                  :value-key="props.id" placeholder="请选择样例代码" check-strictly/>
</template>
